<template>
  <div>
    <input v-model="query" />
    <button @click="updateColor">更新颜色</button>
    <div class="box" :style="{background: tweenCSSColor}"></div>
    <p>{{tweenCSSColor}}</p>
  </div>
</template>
<script>
import tween from "@tweenjs/tween.js";
import color from "color";
export default {
  data() {
    return {
      query: '',
      color: null,
      tweenColor: {r: 0, g: 0, b: 0, alpha: 1},
    };
  },
  computed: {
    tweenCSSColor() {
        return color(this.tweenColor).rgb().toString();
    }
  },
  watch: {
    color(to) {
      function animate() {
        if (tween.update()) {
          requestAnimationFrame(animate);
        }
      }
      new tween.Tween(this.tweenColor).to(to, 750).start();
      animate();
    }
  },
  methods: {
      updateColor(){
          this.color = color(this.query).object();
      }
  }
};
</script>
<style lang="less" scoped>
.box {
    margin: auto;
  width: 50px;
  height: 50px;
}
</style>